<%@ page contentType="text/html;charset=UTF-8"
         language="java" %>
<%@page isELIgnored="false" %>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>欢迎注册</title>
    <link href="css/register.css" rel="stylesheet">
    <style>
        table td:first-child {
            color: white;
        }

        .inputs {
            vertical-align: middle;
            height: 30px;
            width: 140px;
        }

        #username_err {
            margin-left: 150px;
        }

        body {
            background-image: url("imgs/reg_bg_min1.jpg");
            text-align: center;
        }
    </style>
</head>
<body>
    <div class="form-div">
    <div class="reg-content">
    <h1>欢迎注册</h1>
    <span>已有帐号？</span>
      <a href="login.jsp">登录</a>
</div>
<form id="reg-form" action="/registerServlet" method="post">
    <span id="username_err" class="err_msg">${register_msg}</span>
  <table>
    <tr>
    <td>用户名</td>
    <td class="inputs">
    <input name="username" type="text" id="username">
        <br>
        </td>
        </tr>
      <tr>
          <td>密码</td>
          <td class="inputs">
          <input name="password" type="password" id="password">
          <br>
          <span id="password_err" class="err_msg" style="display: none">密码格式有误</span>
          </td>
          </tr>
      <tr>
      <td>验证码</td>
      <td class="inputs">
      <input name="checkCode" type="text" id="checkCode">
          <img id="checkCodeImg" src="/checkCodeServlet">
      <a href="#" id="changeImg" >看不清？</a>
      </td>
      </tr>

      <script>
          document.getElementById("changeImg").onclick =
              function () {
                  //路径后面添加时间戳的目的是避免浏览器进行缓存静态资源
                  document.getElementById("checkCodeImg").src = "/checkCodeServlet?"+
                      new Date().getMilliseconds();
              }
      </script>

      </table>
    <div class="buttons">
    <input value="注 册" type="submit" id="reg_btn">
    </div>
    <br class="clear">
    </form>
    </div>
</body>
</html>